<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>骑手界面</title>
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <link rel="stylesheet" href="../css/indexStyle.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<style>
    a{
        text-decoration: none;
    }
    .down {
        width: 100%;
        height: 640px;
        display: flex;
        flex-direction: row;
        background-color: #f0f3ef;
    }

    .downLeft {
        width: 11.8%;
        height: 500px;
        margin-left: 180px;
        margin-top: 130px;
        background-color: white;
        display: flex;
        flex-direction: column;
    }

    .downRU {
        width: 120%;
        height: 11%;
        margin-left: -180px;
        margin-top: 30px;
        background-color: white;
    }

    .downRD {
        width: 880px;
        height: 498px;
        margin-left: 30px;
        background-color: white;
        margin-top: 30px;
    }

    .downAddress {
        font-size: 15px;
        color: rgba(0, 0, 0, 0.7);
        font-family: 楷体;
        margin-top: 25px;
        margin-left: 30px;
    }

    .downPer {
        font-size: 17px;
        color: black;
        font-family: 楷体;
        font-weight: bolder;
        margin-top: 25px;
        margin-left: 30px;
    }

    .aLL {
        display: flex;
        flex-direction: row;
        width: 720px;
        margin-left: 13px;
        border-radius: 5px;
        border-top: 1px solid rgba(131, 131, 131, 0.31);
        border-bottom: 1px solid rgba(131, 131, 131, 0.31);
    }

    .all-3 {
        width: 140px;
        border-radius: 5px;
        border-left: 1px solid rgba(131, 131, 131, 0.31);
        border-right: 1px solid rgba(131, 131, 131, 0.31);

    }

    .all-3 > img {
        width: 70px;
        height: 70px;
        margin-top: 12px;
        margin-left: 43px;
    }

    .all-3 > input {
        font-size: 13px;
        width: 80px;
        height: 25px;
        background-color: white;
        margin-top: 5px;
        margin-left: 40px;
        border: 1px solid rgba(131, 131, 131, 0.31);
        border-radius: 10px;
    }

    .all-2 {
        margin-top: 10px;
        margin-left: 10px;
        width: 290px;
    }

    .all-2 > input {
        width: 150px;
        height: 20px;
        margin-top: 3px;
        margin-left: 30px;
    }
    .getOrder{
        border-radius: 50%;
        width: 70px;
        height: 70px;
        background-color: yellowgreen;
        margin-top: 20px;
        margin-left: 15px;
    }
</style>
<body>
<!--    导航栏-->
<div th:replace="~{header :: header}"></div>
<!-- 接单界面 -->
<div class="down">
    <div class="downLeft">
        <div style="margin-top: 10px; margin-left: 35px;">
            <p class="downPer">- - -</p>
        </div>
        <div style="margin-top: 8px; margin-left: 25px;">
            <a class="downAddress" th:href="@{/dilivery/get}">待接订单</a>
        </div>
        <div style="margin-top: 8px; margin-left: 25px;">
            <a class="downAddress" th:href="@{/dilivery/getById}">我的订单</a>
        </div>
    </div>
    <div style="display: flex; flex-direction: column">
        <div class="downRU">
            <p class="downAddress">骑手接单</p>
        </div>
        <div class="downRD">
            <div style="width: 100%;height: 5px"></div>
            <div class="aLL" th:each="orders:${list}">
                <div class="all-3" >
                    <div style="width: 140px; margin-left: 15px;height: 99px" th:each="detail:${orders.orderDetailList}">
                        <img style="border-radius: 5px; margin-left: -15px;width: 100%; height: 115px" th:src="${detail.goods.goodsImage}"/>
                    </div>
                </div>
                <div class="all-2">
                    <div th:each="detail:${orders.orderDetailList}">
                        <span style="font-size: 15px;color: #bd2c00" th:text="${detail.goods.goodsName}"></span><br>
                        价格：<span style="color: #bd2c00" th:text="${detail.goodsPrice}"></span><br>
                        数量：<span style="color: #bd2c00" th:text="${detail.goodsNumber}"></span><br><br>
                    </div>
                    总计：<span style="color: #bd2c00" th:text="${orders.sum}"></span>
                </div>
                <div class="all-2">
                    收货人姓名：<span style="color: dodgerblue" th:text="${orders.userAddress.realName}"></span><br>
                    联&nbsp;系&nbsp;方&nbsp;式&nbsp;：<span style="color: dodgerblue" th:text="${orders.userAddress.telephone}"></span><br>
                    收&nbsp;货&nbsp;地&nbsp;址&nbsp;：<span style="color: dodgerblue" th:text="${orders.userAddress.address}"></span><br>

                </div>
                <div class="all-3">
                    <div class="getOrder" >
                        <div style="width: 100%; height: 23px"></div>
                        <a style="margin-left: 18px; color: #00F7DE" th:href="@{/dilivery/modById(orderId=${orders.orderId})}">接单</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</div>
</body>
</html>